<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '营业汇总',
  },
}
</route> 

<template>
  <view style="height: 100%" class="">
    <wd-calendar
      label="时间筛选"
      :shortcuts="shortcuts"
      :on-shortcuts-click="onShortcutsClick"
      type="daterange"
      v-model="value"
      @confirm="handleConfirm"
    />

    <wd-grid :gutter="10" :column="2">
      <wd-grid-item use-text-slot use-icon-slot>
        <template #icon>
          <image src="@/static/home/liuliang.png" style="width: 30px; height: 30px" />
        </template>

        <template #text>
          <view class="text">
            订单数
            <wd-text :text="total" type="primary" />
          </view>
        </template>
      </wd-grid-item>
      <wd-grid-item use-text-slot use-icon-slot>
        <template #icon>
          <image src="@/static/home/money.png" style="width: 30px; height: 30px" />
        </template>

        <template #text>
          <view class="text">
            总收入
            <wd-text :text="moneyTotal" mode="price" type="error" prefix="￥" />
          </view>
        </template>
      </wd-grid-item>
    </wd-grid>

    <view class="list">
      <view v-for="d in stats" :key="d.date" class="item">
        <view class="head">
          <text class="date">{{ d.date }}</text>
          <view class="income">
            收入
            <text class="money">￥{{ (d.totalAmount || 0) / 100 }}</text>
          </view>
        </view>
        <view class="row">
          <text>订单数：{{ d.total || 0 }}</text>
          <text>金额：￥{{ (d.totalAmount || 0) / 100 }}</text>
        </view>
        <view class="row">
          <text>退款单数：{{ d.refundCount || 0 }}</text>
          <text>退款金额：￥{{ (d.refundAmount || 0) / 100 }}</text>
        </view>
        <view class="row">
          <text>投币数：{{ d.coinCount || 0 }}</text>
        </view>
        <view class="row actions">
          <wd-button size="small" plain type="primary" block @click="goDetail(d.date)">详情</wd-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs'
import { http, httpPost } from '@/utils/http'

const stats = ref<any[]>([])

const shortcuts = ref<Record<string, any>[]>([
  {
    text: '近7天',
    id: 7,
  },
  {
    text: '近15天',
    id: 15,
  },
  {
    text: '近30天',
    id: 30,
  },
])
const value = ref<any>([dayjs().startOf('day').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')])

// 数据源

const onShortcutsClick = ({ item }) => {
  const dayDiff = item.id
  const endDate = Date.now() - 24 * 60 * 60 * 1000
  const startDate = endDate - dayDiff * 24 * 60 * 60 * 1000

  return [startDate, endDate]
}

// 总数
const total = ref(0)

// 收益
const moneyTotal = ref(0)

// 获取统计信息
const getStatistics = async (startDate?: string, endDate?: string) => {
  const _res: any = await httpPost('/api/app/order/order/statisticsByDate', {
    // 当天的0点
    startTime: startDate || dayjs().startOf('day').format('YYYY-MM-DD'),
    endTime: endDate || dayjs().format('YYYY-MM-DD'),
  })

  let _money = 0

  let _total = 0

  const normalized = (_res || []).map((item: any) => ({
    ...item,
    totalAmount: Number(item?.totalAmount || 0),
    total: Number(item?.total || 0),
    coinCount: Number(item?.coinCount || 0),
    refundAmount: Number(item?.refundAmount || 0),
    refundCount: Number(item?.refundCount || 0),
  }))

  normalized.forEach((item: any) => {
    _money += item.totalAmount
    _total += item.total
  })

  moneyTotal.value = (_money * 1) / 100
  total.value = _total
  stats.value = normalized
}

const init = async () => {
  getStatistics()
}

onReady(() => {
  init()
})

function handleConfirm({ value }) {
  let [_st, _et] = value

  getStatistics(dayjs(_st).format('YYYY-MM-DD'), dayjs(_et).format('YYYY-MM-DD'))

  // // 把时间戳转换成xxxx-xx-xx格式
  // value.forEach((item, index) => {
  //   value[index] = dayjs(item).format('YYYY-MM-DD')
  // })
}

function goDetail(date: string) {
  uni.navigateTo({
    url: `/pages/index/order/index?date=${date}`,
  })
}
</script>

<style lang="scss" scoped>
.text { margin-top: 12px; }
.list { padding: 20rpx; }
.item {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.04);
}
.head { display: flex; justify-content: space-between; align-items: center; }
.date { color: #666; font-size: 26rpx; }
.income { color: #333; font-size: 26rpx; }
.money { color: #0bbf5f; font-weight: 600; margin-left: 8rpx; }
.row { margin-top: 12rpx; color: #555; font-size: 26rpx; display: flex; justify-content: space-between; }
.actions { justify-content: flex-end; }
</style>
